<template>
    <div>
        <div style="position:absolute; width:100%;height:75%;overflow:scroll">
            <div v-for="ticket in ticketArr">
                <form-preview v-if="ticket.remain >= 0" :header-label="ticket.mch_name" :footer-buttons="buttons" :header-value="ticket.end_time" :body-items="ticket.wineList" :name="ticket.wine_id"></form-preview>
                </br>
            </div>
            <x-button v-if="old == false" type="primary" plain style="border-radius:20px;width:90%" @click.native="show_old">显示过期存酒单</x-button>
            <div v-for="ticket in ticketArr">
                <div v-if="old == true && ticket.remain < 0">
                    <form-preview :header-label="ticket.mch_name" :header-value="'过期:' + (-1 * parseInt(ticket.remain)) +'天'" :body-items="ticket.wineList" :name="ticket.wine_id"></form-preview>
                    </br>
                </div>
            </div>
        </div>
        <!--二维码-->
        <div v-transfer-dom>
            <x-dialog style="position:relative;top:-100px;" v-model="show" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
                <p style="color:#fff;text-align:center;" @click="show = false;status = 2">
                <qrcode :value="qrcode" type="img" style="max-width:100%"></qrcode>
                <br>
                <br>
                <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
                </p>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    import {XDialog,TransferDomDirective as TransferDom,XHeader,XButton,Cell,ButtonTab, ButtonTabItem,Divider,XInput,XNumber,Group,Qrcode,Scroller} from 'vux'
    import FormPreview from '../../common/com/form-preview'
    import util from '../../api/util.js'
    import user from '../../api/user.js'
    import dateformat from 'dateformat'
    // import axios from 'axios'
    import qs from 'qs'
    
    // axios.defaults.headers['Content-Type']="application/x-www-form-urlencoded"
    // axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
    // axios.defaults.baseURL = "http://127.0.0.1:4000"
    // axios.defaults.headers.post['Content-Type']="application/x-www-form-urlencoded"
    // axios.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
    // axios.defaults.headers.get['X-Requested-With'] = 'XMLHttpRequest';
    export default {
        directives: {
            TransferDom
        },
        components:{
            XDialog,
            XHeader,
            Cell,
            XButton,
            ButtonTab,
            ButtonTabItem,
            Divider,
            XInput,
            XNumber,
            Group,
            Qrcode,
            FormPreview,
            Scroller
        },
        data(){
            return {
                qrcode:'',
                demo01:0,
                demo02:0,
                roundValue:0,
                status:0,
                buttons: [{
                    style: 'primary',
                    text: '取酒',
                    onButtonClick: (name) => {
                        this.status = 3
                        this.qrcode = name + ''
                        // console.log(this.qrcode)
                    }
                }],
                wine_name:'',
                old:false,
                ticketArr:[],
                show:false
            }
        },
        methods:{
            show_old(){
                this.old = true
            }
        },
        watch:{
            'status':function(val,oldVal){
                if(val == 3){
                    this.show = true
                    var _ = this
                    console.log(this.qrcode)
                    user.socket.emit("subscribe",{
                        mch_id:user.userinfo.mch_id,
                        openid:user.userinfo.openid,
                        tag:this.qrcode
                    })
                    user.socket.on('notify',function(_data){
                        _.show = false
                        _.showPosition('top')
                        _.$vux.alert.show({
                            title: '提示',
                            content: _data,
                        })
                        user.socket.emit('cancelSubscribe',{tag:this.qrcode})
                    })
                }
            }
        },
        mounted(){
            this.$axios.get('/wine/getArrByUser?openid='+user.userinfo.openid)
            .then((ret)=>{
                console.log(ret)
                var _ = this
                var tmpObj = {}
                console.log(ret.data)
                ret.data.forEach((el,index)=>{
                    tmpObj = {}
                    tmpObj.wineList = []
                    tmpObj.wine_id = el.wine_id
                    tmpObj.mch_id = el.mch_id
                    tmpObj.mch_name = el.mch_name
                    tmpObj.openid = el.openid
                    tmpObj.nick = el.nick
                    tmpObj.end_time = dateformat(el.end_time,"yyyy-mm-dd")
                    tmpObj.remain = util.getRemain(tmpObj.end_time)
                    tmpObj.wineList = util.strToJsonArr(el.wine_list)
                    _.ticketArr.push(tmpObj)
                })
                console.log(_.ticketArr)
            })
        }
    }
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';

.demo-list-box {
    position:absolute;
    width:100%;
    height:400px;
    overflow:scroll;
}

/*.demo-list-box {
  margin-bottom: 10px;
  background-color: #fff;
  width: 100%;
  height:400px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}*/

.flex-demo {
  text-align: center;
  color: #fff;
  background-color: lightcoral;
  border-radius: 4px;
  background-clip: padding-box;
}

.grid-center {
  display: block;
  text-align: center;
  color: #666;
}

.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 200px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>